前言

开发过移动端的应该都遇到过css里边写的1px实际上看着比1px粗，由于devicePixelRatio的存在，移动端永远无法使用border属性实现一个统一的1px细线。详细原因可以参考大漠的文章，也可以参考博客

1px细线的处理方法有多种，下面主要介绍现在主流的方法

伪元素:after

为什么说是主流方法呢？

可以参考现在比较受欢迎的移动端ui样式库，比如微信的WeUI button

的1px border

如蚂蚁金服的(Ant Design Mobile组件库)[https://mobile.ant.design/components/button-cn/]

上面的图片如果看不清晰，我们可以具体分析下WeUI的实现原理

weui-btn:after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 10px;
}

我们可以看到通过伪元素构建的基本原理，是先将它的长宽放大到2倍, 边框宽度设置为1px, 再以transform缩放到50%，同时，元素本身使用position:relative相对定位，伪元素使用position:absolute绝对定位

移动端1px问题

前言

伪元素:after